<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.loginBg {
	background-color: #1d5873;
	background-image: url("../images/loginIndex.png");
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	font-family: "微软雅黑", "宋体";
}
</style>
<meta charset="UTF-8">
<title>zdm平台|登录</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link rel="shortcut icon" href="static/images/logo-icon.jpg" type="image/x-icon" />

<!-- Theme style -->
<link href="static/css/AdminLTE/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap 3.3.5 -->
<link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome -->
<link href="static/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link rel="stylesheet" href="static/css/ionicons.min.css">
<!-- Theme style -->
<link href="static/css/AdminLTE/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link rel="stylesheet" href="static/plugins/iCheck/square/blue.css">

<!-- jQuery 2.1.4 -->
<script src="static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="static/js/bootstrap.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="static/plugins/iCheck/icheck.min.js"></script>
<script>
      $(function () {
        $('input').iCheck({
          checkboxClass: 'icheckbox_square-blue',
          radioClass: 'iradio_square-blue',
          increaseArea: '20%' // optional
        });
      });
    </script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
<script>
        $(document).ready(function() {
     
		//$("#warnMsg").hide();
		$("#loginId").focus();

		$('#rememberFlag').on('ifChanged', function(event) {
			$("#warnMsg").toggle();
		});

		document.onkeyup = function(e) {
			var ev = document.all ? window.event : e;
			if (ev.keyCode == 13) {
				//   $("#FormId").submit();//处理事件
				checkSubmit();
			}
		}
	});

	function checkSubmit() {
		var loginId = $.trim($("#loginId").val());
		var pwd = $.trim($("#pwd").val());
		$("#showMsg").hide();
		if (loginId.length == 0) {
			$("#loginId").focus();
			return;
		}
		if (pwd.length == 0) {
			$("#pwd").focus();
			return;
		}
		$("#loginForm").submit();
	}

	function checkSubmitShow() {
		var loginId = $.trim($("#loginId").val());
		var pwd = $.trim($("#pwd").val());

		if (loginId.length == 0) {
			$("#loginId").focus();
			$("#infoMsg").html("请输入用户名！");
			$("#showMsg").show();
			return;
		}
		if (pwd.length == 0) {
			$("#pwd").focus();
			$("#infoMsg").html("请输入密码！");
			$("#showMsg").show();
			return;
		}
		$("#loginForm").submit();
	}
</script>
</head>
<body class="hold-transition login-page">
	<div class="login-box">
		<div class="login-logo">
			<a href="#"><b>zdm</b>Console</a>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body">

			<div class="alert alert-warning alert-dismissable fade in" id="warnMsg" style="display: none">
				<i class=" fa fa-exclamation-circle"></i> 两周内将不用输入用户密码即可登录系统，请勿在公用电脑上使用此功能！
			</div>

		<div class="alert alert-warning alert-dismissable fade in" id="showMsg" style="display: none">
				<i class=" fa fa-exclamation-circle"></i> <span id="infoMsg"></span>
			</div>
					
			<form action="login/doLogin" method="post" id="loginForm">
				<div class="form-group has-feedback">
					<input type="text" class="form-control" placeholder="账户" id="loginId" name="loginId" value="" autocomplete="off"> <span class="glyphicon glyphicon-user form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" placeholder="密码" id="pwd" name="pwd" onfocus="this.type='password'" autocomplete="off"> <span
						class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="row">
					<div class="col-xs-8">
						<div class="checkbox icheck">
							<label> <input type="checkbox" name="rememberFlag" id="rememberFlag"> 记住账号密码
							</label>
						</div>
					</div>
					<!-- /.col -->
					<div class="col-xs-4">
						<button type="button" class="btn btn-primary btn-block btn-flat" onclick="checkSubmitShow();">登录</button>
					</div>
					<!-- /.col -->
				</div>
			</form>

			<div class="social-auth-links text-center">
				<p>- OR -</p>
				<a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using Facebook</a> <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i
					class="fa fa-google-plus"></i> Sign in using Google+</a>
			</div>
			<!-- /.social-auth-links -->

			<!-- <div class="text-right"> -->
			<a href="#">忘记密码</a><br> <a href="register.html" class="text-center">注册</a>
			<!-- </div> -->
		</div>
		<!-- /.login-box-body -->
	</div>
	<!-- /.login-box -->


</body>
</html>